<!--
* @description  
* @fileName  表单数据收集
* @author zhoujunlin
* @date 2022-03-10 20:14:23
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单数据收集</title>
    <script src="../js/vue.js"></script>
</head>

<!-- 
收集表单数据：
若：<input type="text"/>,则v-model默认收集的是value值，用户输入的就是value值
若：<input type="password"/>,则v-model默认收集的是value值，用户输入的就是value值
若：<input type="radio"/>,则v-model默认收集的是value值，因为此类型无法输入内容，则无法通过输入得到value值，
所以需要给标签手动添加value值。
若：<input type="checkbox"/>
    1. 没有配置input的value属性，那么v-model默认读取的就是checked是否被勾选即布尔值
    2. 配置input的value属性：
        A. v-model的初始值是非数组，那么v-model默认读取的就是checked是否被勾选即布尔值
        B. v-model的初始值是数组，那么手机的就是value组成的数组
v-model的三个修饰符：
lazy：失去焦点再收集数据
number: 输入字符串转为有效的数字
trim：去除首尾空格过滤        
 -->


<body>
    <div id="app">
        <!-- 阻止表单跳转事件 -->
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account" /> <br /><br /><br />
            密码：<input type="password" v-model.trim="userInfo.password" /> <br /><br /><br />
            年龄：<input type="number" v-model.number="userInfo.age" /> <br /><br /><br />
            性别：
            男：<input type="radio" name="sxe" v-model="userInfo.sex"  value="male" />
            女：<input type="radio" name="sxe" v-model="userInfo.sex"  value="female" /><br /><br /><br />
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study" />
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat" /> <br/><br/><br />
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br /><br /><br />
            其它信息:
            <textarea v-model.lazy="userInfo.other"></textarea><br/><br /><br />
            <input type="checkbox" v-model="userInfo.agree" />
            阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <br/><br/><br />
            <button>提交</button>
        </form>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    userInfo: {
                        account: "",
                        password: "",
                        age: 18,
                        sex: "female",
                        hobby: [],
                        city: "beijing",
                        other: "",
                        agree: "true"
                    }
                }
            },
            methods: { // 方法
                demo() {
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        });

    </script>
</body>

</html>